<template>
  <div class="container">
    <img src="../assets/file.jpeg" alt=""/>
    <div class="form-container">
      <div class="title">
        科协软件组管理系统
      </div>
      <div class="form">
        <input type="text" v-model="formData.account" placeholder="学号">
        <input type="password" v-model="formData.password" placeholder="密码">
        <div class="options">
          <tiny-button type="primary" @click="login"> 登陆</tiny-button>
          <tiny-button type="primary"> 忘记密码</tiny-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Button as TinyButton, Notify} from '@opentiny/vue'
import {useRouter} from 'vue-router'
import {ref, inject} from 'vue'

const axios = inject('axios');
const formData = ref({
  account: "",
  password: "",
});
const router = useRouter();
const validate = () => {
  if (formData.value.account === "") {
    Notify({
      title: "学号不能为空",
      type: "error",
      position: 'top-right'
    });
    return false;
  }
  if (formData.value.password === "") {
    Notify({
      title: "密码不能为空",
      type: "error",
      position: 'top-right'
    });
    return false;
  }
  return true;
};
const login = () => {
  if (validate()) {
    axios.post('/user/login', formData.value).then(res => {
      var data = res.data
      if(data.code==1){
        Notify({
          title: "登陆成功",
          type: "success",
          position: 'top-right'
        });
        window.localStorage.setItem('account',formData.value.account);
        window.localStorage.setItem('user',JSON.stringify(data.data));
        router.replace('/');
      }else{
        Notify({
          title: data.message,
          type: "error",
          position: 'top-right'
        });
      }
    })
  }

  //router.push('/');
};
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  background-color: #fbfcff;

  img {
    width: 30vw;
    margin-top: 30vh;
  }

  .form-container {
    /* 原有样式 */

    width: 30vw;
    height: auto;
    padding: 30px 20px;
    padding-bottom: 50px;
    background-color: #ffffff;
    margin-left: 90px;

    /* 添加玻璃感效果 */
    backdrop-filter: blur(10px); /* 调整模糊半径以改变磨砂程度 */
    position: relative; /* 保证背景过滤器能正确应用到元素后面的内容 */

    /* 可选样式增强玻璃感 */
    border-radius: 8px; /* 添加圆角以增加视觉柔和度 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加微妙阴影模拟立体感 */
  }

  .title {
    color: #5e7ce0;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 30px auto;
  }

  .form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 10px auto;
  }

  input {
    background-color: transparent;
    border: 1px solid #096dd9;
    width: 100%;
    margin-bottom: 10px;
    height: 30px;
    text-indent: 1em;
  }

  button {
    margin: 10px 20px;
  }

}

.form-container::after {
  content: "智慧的起点，梦想的舞台";
  display: block;
  position: absolute;
  bottom: -70px;
  width: 100%;
  text-align: center;
  color: #096dd9;
  letter-spacing: 10px;
  font-weight: 500;
  font-size: 16px;

}
</style>